avatar
03.【个人网站】如何做网站自定义页面 URL 映射
🌐

03.【个人网站】如何做网站自定义页面 URL 映射

keywords
Next.js, Notion, Website, 自定义 URL, SEO, 用户体验
published_date
最新编辑 2024年10月16日
Created time
2024年08月01日
slug
pageUrlOverrides 是一个配置对象,用于在 Notion 集成中定义自定义页面 URL 映射,以替换自动生成的 URL。它有助于 SEO 优化和用户体验。示例中展示了如何将 Notion 页面 ID 映射到更友好的自定义 URL,并提供了一个清理页面 URL 映射的函数 cleanPageUrlMap,确保映射的有效性。
tags
Notion
Next.js
Website
pageUrlOverrides 是一个配置对象,通常用于在 Notion 集成或其他内容管理系统(CMS)中定义自定义页面 URL 映射。这些映射允许开发者为页面设置自定义 URL,而不是使用自动生成的默认 URL。

示例场景

假设有一个 Notion 页面,默认 URL 是 https://www.notion.so/my-page-id,希望它在网站上显示为 https://www.mywebsite.com/custom-urlpageUrlOverrides 就是为了解决这种需求的。

具体用途

  1. 自定义 URL 映射:允许将自动生成的 URL 替换为更友好的自定义 URL。
  1. SEO 优化:通过设置简洁、可读性强的 URL,有助于搜索引擎优化(SEO)。
  1. 用户体验:让用户更容易记住和访问特定页面。

配置示例

以下是一个 pageUrlOverrides 的配置示例:
const pageUrlOverrides = { '/about': '1234abcd5678efgh9012ijkl', // 自定义 URL "/about" 对应 Notion 页面 ID "1234abcd5678efgh9012ijkl" '/contact': '9876zyxw5432vuts1098rqp' // 自定义 URL "/contact" 对应 Notion 页面 ID "9876zyxw5432vuts1098rqp" };
在这个示例中:
  • 当用户访问 https://www.mywebsite.com/about 时,实际上会显示 Notion 页面 ID 为 1234abcd5678efgh9012ijkl 的内容。
  • 当用户访问 https://www.mywebsite.com/contact 时,实际上会显示 Notion 页面 ID 为 9876zyxw5432vuts1098rqp 的内容。

如何使用

在实际使用中,可能需要一个函数来处理这些自定义 URL 映射,并将其应用到的项目中。以下是一个示例函数,结合之前的 cleanPageUrlMap 函数,演示如何使用 pageUrlOverrides
import { parsePageId } from 'notion-utils'; interface PageUrlOverridesMap { [key: string]: string; } const pageUrlOverrides: PageUrlOverridesMap = { '/about': '1234abcd5678efgh9012ijkl', '/contact': '9876zyxw5432vuts1098rqp' }; /** * 清理页面URL映射 * * 该函数用于清理页面URL映射,确保每个页面ID和URI都是有效的。它会将相对路径URI转换为对象键,并使用解析后的UUID作为值。 * * @param {PageUrlOverridesMap} pageUrlMap - 页面URL映射对象,键为URI,值为页面ID。 * @param {Object} options - 可选参数对象。 * @param {string} options.label - 用于错误消息中的标签。 * @returns {PageUrlOverridesMap} - 返回清理后的页面URL映射对象。 * @throws {Error} - 当页面ID或URI无效时抛出错误。 */ function cleanPageUrlMap( pageUrlMap: PageUrlOverridesMap, { label }: { label: string } ): PageUrlOverridesMap { return Object.keys(pageUrlMap).reduce((acc, uri) => { const pageId = pageUrlMap[uri]; const uuid = parsePageId(pageId, { uuid: false }); if (!uuid) { throw new Error(`Invalid ${label} page id "${pageId}"`); } if (!uri) { throw new Error(`Missing ${label} value for page "${pageId}"`); } if (!uri.startsWith('/')) { throw new Error( `Invalid ${label} value for page "${pageId}": value "${uri}" should be a relative URI that starts with "/"` ); } const path = uri.slice(1); return { ...acc, [path]: uuid }; }, {} as PageUrlOverridesMap); } const cleanedPageUrlOverrides = cleanPageUrlMap(pageUrlOverrides, { label: 'pageUrlOverrides' }); console.log(cleanedPageUrlOverrides);

总结

pageUrlOverrides 允许为 Notion 页面设置自定义 URL,从而提高 SEO 和用户体验。通过使用辅助函数(如 cleanPageUrlMap),可以确保这些自定义 URL 映射的有效性,并将其应用到的网站项目中。

系列文章

🌐
01.【个人网站】如何使用Notion作为数据库进行全栈开发
🌐
02.【个人网站】如何在Next中集成Notion数据库
🌐
03.【个人网站】如何做网站自定义页面 URL 映射
🌐
04.【个人网站】如何使用 Vercel 快速部署个人网站 | 全流程指南
🌐
05.【个人网站】基于i18n在Next项目中搭建国际化网站
🌐
06.【个人网站】使用Mailchimp做网站邮件订阅功能
 

关于我

My desire to practice my skills and share my acquired knowledge fuels my endeavors.

联系 : znjessie858@gmail.com

订阅

订阅我的文章,收到我的最新发布通知,可随时取消订阅!